<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <meta name="referrer" content="no-referrer">
    <title></title>
</head>
<body>
<audio src="" id="audio"></audio>
<div class="musicPlayer-wrapper">
    <div class="musicPlayer">
        <div id="background" class="cover">
            <div id="lyricPanel" class="lyric-panel">
                <ul id="lyric" class="lyric"></ul>
            </div>
            <div class="colorBtn">
                <span title="亮珊瑚" id="pinkBtn" class="pink"></span>
                <span title="天空蓝" id="blueBtn" class="blue"></span>
                <span title="草坪绿" id="greenBtn" class="green"></span>
            </div>
        </div>
        <div class="info-and-feature clearfix">
            <div class="info">
                <h1 id="songName" class="songName"></h1>
                <h2 id="singer" class="singer"></h2>
                <h3 id="songStyle" class="songStyle"></h3>
            </div>
            <div class="feature">
                <a title="微博转发" id="transmit" class="iconfont m-transmit icon-feature" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"></a>
                <span id="star" class="iconfont m-star icon-feature"></span>
                <span id="love" class="iconfont m-love icon-feature"></span>
            </div>
        </div>
        <div class="control clearfix">
            <div class="progress">
                <span id="time" class="time"></span>
                <span id="baseBar" class="basebar">
                    <span id="pathway" class="progress-pathway">
                        <span id="progressBar" class="progress-bar"></span>
                        <span id="dragBall" class="dragBall"></span>
                    </span>
                </span>
            </div>
            <div class="play-ctrl-btn">
                <span title="播放" id="play" class="iconfont m-play icon-play"></span>
                <span title="暂停" id="pause" class="iconfont m-pause icon-play"></span>
                <span title="随机换歌" id="next" class="iconfont m-next icon-play"></span>
                <span title="随机频道" id="channels" class="iconfont m-channels icon-play"></span>
            </div>
            <div class="music-ctrl-btn">
                <span title="单曲循环" id="repeat" class="iconfont m-repeat icon-music"></span>
                <span title="歌词" id="lyricBtn" class="iconfont m-lyric icon-music"></span>
            </div>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></script>
<!--
<script src="js/main.js"></script>
-->
<script>
//播放控制
    var audio = $('audio').get(0);  //audio是DOM API
    var $audio = $('audio');
    var lyricArr = [];
    var $play = $('#play');
    var $pause = $('#pause');
    var $next = $('#next');
    var $channels = $('#channels');
    var $style = $('#songStyle');
    var $song = $('#songName');
    var $singer = $('#singer');
    var $background = $('#background');
    var $lyric = $('#lyric');
    var $basebar = $('.basebar');
    var lyricArr = [];
    var $pinkBtn = $('#pinkBtn'),
        $blueBtn = $('#blueBtn'),
        $greenBtn = $('#greenBtn');
    var $progressBar = $('#progressBar');
    var $time = $('#time');
    var $lyricBtn = $('#lyricBtn');
    var $lyricPanel = $('#lyricPanel');
    var $transmit = $('#transmit'),
        $star = $('#star'),
        $love = $('#love'),
        $repeat = $('#repeat');
    var $baseBar = $('#baseBar');
    var $ball = $('#dragBall');
    var $dragBall = $('#dragBall').draggabilly();
    var $pathway = $('#pathway');

    $repeat.on('click',function(){
        $(this).toggleClass('recycleed')
        if ($(this).hasClass('recycleed')) {
            $('audio').attr('loop','loop');
        }
        if(!$(this).hasClass('recycleed')){
            $('audio').removeAttr('loop','no-loop');
        }
    });

    $dragBall.draggabilly({
        axis: 'x',
        containment: true
    });
    var draggie = $dragBall.data('draggabilly');

    $star.on('click',function(){
       $(this).toggleClass('star')
    });

    $love.on('click',function(){
        $(this).toggleClass('love')
    });



    $('#lyricBtn').on('click',function(){
        $lyricPanel.fadeToggle(800);
    });

    $audio.on('timeupdate',function(){
        var currentTime = Math.floor(this.currentTime);
        var timeM = Math.floor(currentTime / 60);
        var timeS = parseFloat(currentTime % 60);
        var timeShow = (timeM<10?('0' + timeM):timeM)+':'+(timeS<10?('0' + timeS):timeS);
        $time.empty();
        $time.html(timeShow);

        var totalTime = this.duration;
        $progressBar.css({
            width : Math.floor(currentTime / totalTime * 100) + '%'
        });
        $ball.css({
            left: Math.floor(currentTime / totalTime * 100) + '%'
        });
        if(audio.currentTime === audio.duration){
            getMusic();
        }
    });

    $dragBall.on('dragMove',function(){

        var dragMoveX = draggie.position.x;
            var barWidth = $baseBar.width();
            $progressBar.css({
                width : Math.floor(dragMoveX / barWidth * 100) + 1  + '%'
            });
    });

    $dragBall.on('dragStart', function() {
        audio.pause();
    });

    $dragBall.on('dragEnd', function() {
        audio.play();
        var barWidth = $pathway.width();
        var ballWidth = $ball.width();
        var draggie = $(this).data('draggabilly');
        audio.currentTime = draggie.position.x / (barWidth-ballWidth) * audio.duration;
    });

    $baseBar.on('mousedown',function(e){
        var clientX = e.clientX;
        var barLeft = $(this).offset().left;
        var barWidth = $(this).width();
        var percentage = (clientX - barLeft)/barWidth;
        audio.currentTime = audio.duration * percentage;
    });

    $pinkBtn.on('click',function(){
        $lyric.find('li').removeClass('blue');
        $lyric.find('li').removeClass('green');
        $lyric.find('li').toggleClass('pink');
    });

    $blueBtn.on('click',function(){
        $lyric.find('li').removeClass('pink');
        $lyric.find('li').removeClass('green');
        $lyric.find('li').toggleClass('blue');
    });

    $greenBtn.on('click',function(){
        $lyric.find('li').removeClass('blue');
        $lyric.find('li').removeClass('pink');
        $lyric.find('li').toggleClass('green');
    });

    //播放/暂停控制
    $play.on('click',function(){
        if(audio.pause){
            play()
        }else{
            pause()
        }
    });

    $pause.on('click',function(){
        if(audio.play){
            pause()
        }else{
            play()
        }
    });

    $channels.on('click',function(){
        getChannels();
    });

    $next.on('click',function(){
        getMusic();
    });

    function play(){
        audio.play();
        $play.hide();
        $pause.show();
    }

    function pause(){
        audio.pause();
        $play.show();
        $pause.hide();
    }

    function getChannels(){
        $.ajax({
            url: 'http://api.jirengu.com/fm/getChannels.php',
            dataType: 'json',
            method: 'get',
            success: function(ret){
                var channels = ret.channels;
                var num = Math.floor(Math.random()*channels.length);
                var channelName = channels[num].name;
                var channelId = channels[num].channel_id;
                $style.text(channelName);
                $style.attr('title',channelName);
                $style.attr('data-id',channelId);
                getMusic();
            }
        })
    }

    function getMusic(){
        $.ajax({
            url: 'http://api.jirengu.com/fm/getSong.php',
            dataType: 'json',
            method: 'get',
            data: {
                'channel': $style.attr('data-id')
            },
            success: function(ret){
                var resource = ret.song[0],
                        url = resource.url,
                        bgPic = resource.picture,
                        sid = resource.sid,
                        ssid = resource.ssid,
                        title = resource.title,
                        author = resource.artist;
                $audio.attr('src',url);
                $audio.attr('sid',sid);
                $audio.attr('ssid',ssid);
                $song.text(title);
                $song.attr('title',title);
                $singer.text(author);
                $singer.attr('title',author);
                $background.css('background','url('+bgPic+')');
                play();
                getLyric();
            }
        })
    }

    function getLyric(){
        var Sid = $audio.attr('sid');
        var Ssid = $audio.attr('ssid');
        $.post('http://api.jirengu.com/fm/getLyric.php',{ssid: Ssid, sid: Sid})
                .done(function(lyr){
                    var lyr = JSON.parse(lyr);
                    if(lyr.lyric){
                        $lyric.empty();
                        var line = lyr.lyric.split('\n');
                        var timeReg = /\[\d{2}:\d{2}.\d{2}\]/g;
                        var result = [];
                        if(line != ''){
                            for(var i in line){
                                var time = line[i].match(timeReg);
                                if(!time) continue;
                                var value = line[i].replace(timeReg,'');
                                for(var j in time){
                                    var t = time[j].slice(1,-1).split(':');
                                    var timeArr = parseInt(t[0],10)*60+parseFloat(t[1]);
                                    result.push([timeArr,value])
                                }
                            }
                        }
                        result.sort(function (a, b) {
                            return a[0] - b[0];
                        });
                        lyricArr = result;//存到lyricArr里面
                        renderLyric();//渲染歌词
                    }
                }).fail(function(){
                    $lyric.html("<li>本歌曲展示没有歌词</li>");
                })
    }

    function renderLyric(){
        var lyrLi = "";
        for (var i = 0; i < lyricArr.length; i++) {
            lyrLi += "<li data-time='"+lyricArr[i][0]+"'>"+lyricArr[i][1]+"</li>";
        }
        $lyric.append(lyrLi);
        setInterval(showLyric,100);//怎么展示歌词
    }

    function showLyric(){
        var liH = $lyric.find('li').eq(1).outerHeight()-2; //每行高度
        for(var i=0;i< lyricArr.length;i++){//遍历歌词下所有的li
            var curT = $lyric.find('li').eq(i).attr("data-time");//获取当前li存入的当前一排歌词时间
            var nexT = $lyric.find('li').eq(i+1).attr("data-time");
            var curTime = audio.currentTime;
            if ((curTime > curT) && (curT < nexT)){//当前时间在下一句时间和歌曲当前时间之间的时候 就渲染 并滚动
                $lyric.find('li').removeClass("active");
                $lyric.find('li').eq(i).addClass("active");
                $lyric.css('top', -liH*(i-2));
            }
        }
    }

    $(document).ready(getChannels());
</script>
</body>
</html>